body{
    background-color: #eee;
}
.zft{
    width: 350px;
    height: 350px;
    position:relative;
    margin:200px auto;
    left:0;
    top:0;
    transform-style: preserve-3d;
    transform:translate(-50%,-50%);
    animation:move 10s ease-in-out infinite;
}
.side{
    width: 100%;
    height: 100%;
    opacity: 0.6;
    border:2px solid white;
    position:absolute;
    text-align: center;
    line-height: 350px;
}
.front{
    background-color: rgb(55, 156, 199);
    transform:translateZ(-180px);
    /* background-image: url(./Forza\ Horizon\ 5\ Screenshot\ 2024.04.11\ -\ 21.40.55.63.png); */
}
.front img{
    width: 200px;
    height: 200px;
}
.back{
    background-color: rgb(150, 40, 198);
    transform: translateZ(180px) rotateY(180deg);
}
.left{
    background-color: yellow;
    transform:translateX(-180px) rotateY(-90deg);

}
.right{
    background-color: aquamarine;
    transform:translateX(180px) rotateY(90deg);
}
.top{
    background-color: rgb(229, 249, 132);
    transform:translateY(-180px) rotateX(-90deg);
}
.bottom{
    background-color: rgb(65, 238, 163);
    transform:translateY(180px) rotateX(90deg);
}
@keyframes move{
    from{
        transform:rotateX(0) rotateY(0);
    }
    25%{
        transform:rotateX(90deg) rotateY(90deg);
    }
    50%{
        transform:rotateX(180deg) rotateY(180deg);
    }
    75%{
        transform:rotateX(270deg) rotateZ(90deg);
        
    }
    to{
        transform:rotateX(360deg) rotateZ(180deg);
    }
}